﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../static/css/swiper.min.css" rel="stylesheet" type="text/css"/>
    <link href="../static/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../static/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="../static/img/favicon.ico" rel="shortcut icon"/>
    <link href="https://fonts.googleapis.com/css?family=Lato:700,900%7CDidact+Gothic" rel="stylesheet">
    <title>Opium</title>
</head>
<body>
<!-- LOADER -->
<div id="loader-wrapper">
    <div class="cssload-container">
        <div class="cssload-whirlpool"></div>
    </div>
</div>
<!-- LOADER -->

<!-- HEADER -->
<header class="header-style header-style2 header-style3 header-style4">
    <div class="hamburger-icon3">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="header-content">
        <div class="row">
            <div class="col-xs-6 col-sm-2">
                <a class="logo" href="index.html">
                    <img src="../static/img/logo.png" alt="#"/>
                </a>
            </div>
            <div class="col-xs-6 col-sm-10">
                <div class="hamburger-icon">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="hamburger-icon2">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <nav class="normal-s">
                    <ul>
                        <li class="dropdown-plus">
                            <a href="/index.html">HOME</a>
                            <span></span>
                            <ul>
                                <li><a href="index.html">Home #1</a></li>
                                <li><a href="index2.html">Home #2</a></li>
                                <li><a href="index3.html">Home #3</a></li>
                                <li><a href="index4.html">Home #4</a></li>
                                <li><a href="index5.html">Home #5</a></li>
                            </ul>
                        </li>
                        <li class="active">
                            <a href="/about.html">ABOUT</a>
                        </li>
                        <li>
                            <a href="/detail.html">PORTFOLIO</a>
                        </li>
                        <li class="dropdown-plus">
                            <a href="/blog.html">BLOG</a>
                            <span></span>
                            <ul>
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="blogdetail.html">Blog detail</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="/contact.html">CONTACT</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="section">
                <p>A small design & technology freelancer based out of Atlanta, GA. Catch up on my latest projects and
                    get in touch.</p>
            </div>
            <div class="category">
                <span class="small-1">CATEGORY</span>
                <ul>
                    <li class="active">All</li>
                    <li>Development</li>
                    <li>Illustration</li>
                    <li>Product</li>
                    <li>Typography</li>
                </ul>
            </div>
            <div class="sort-by">
                <span class="small-1">SORT BY</span>
                <ul>
                    <li>Random</li>
                    <li class="active">Popular</li>
                    <li>Rate</li>
                </ul>
            </div>
            <div class="normal-3 section">
                <ul>
                    <li>
                        <a href="tel:+138(095)6526538">+138 (095) 6526 538</a>
                    </li>
                    <li>
                        <a href="mailto:info@opium.com">info@opium.com</a>
                    </li>
                </ul>
                <div class="empty-space h10-xs fl"></div>
                <div class="follow">
                    <a class="social" href="https://www.facebook.com/" target="_blank">
                        <i class="fa fa-facebook" aria-hidden="true"></i>
                    </a>
                    <a class="social" href="https://www.instagram.com/" target="_blank">
                        <i class="fa fa-instagram" aria-hidden="true"></i>
                    </a>
                    <a class="social" href="https://www.pinterest.com/" target="_blank">
                        <i class="fa fa-pinterest-p" aria-hidden="true"></i>
                    </a>
                    <a class="social" href="https://www.twitter.com/" target="_blank">
                        <i class="fa fa-twitter" aria-hidden="true"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="mob-icon"></div>
    </div>
</header>
<!-- HEADER -->

<!-- OVERLAY-MENU -->
<div class="overlay-wrapper height-min">
    <div class="overlay-animation"></div>
    <div class="flex">
        <div class="flex-in">
            <div class="overlay-menu">
                <div class="container">
                    <div class="row">
                        <div class="btn-close"><span></span><span></span></div>
                        <div class="col-lg-2 col-lg-offset-5">
                            <ul>
                                <li class="dropdown-plus">
                                    <a href="index.html">HOME</a>
                                    <span></span>
                                    <ul>
                                        <li><a href="index.html">Home #1</a></li>
                                        <li><a href="index2.html">Home #2</a></li>
                                        <li><a href="index3.html">Home #3</a></li>
                                        <li><a href="index4.html">Home #4</a></li>
                                        <li><a href="index5.html">Home #5</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="about.html">ABOUT</a>
                                </li>
                                <li>
                                    <a href="detail.html">PORTFOLIO</a>
                                </li>
                                <li class="dropdown-plus">
                                    <a href="blog.html">BLOG</a>
                                    <span></span>
                                    <ul>
                                        <li><a href="blog.html">Blog</a></li>
                                        <li><a href="blogdetail.html">Blog detail</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="contact.html">CONTACT</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end OVERLAY-MENU -->

<!-- content -->
<div id="content-wrapper">

    <div class="empty-space h35-xs h90-sm"></div>
    <div class="container-fluid-style2">
        <div class="banner">
            <span class="bg top" style="background-image: url(../static/img/about-img-1.jpg)"></span>
            <div class="banner-element">
                <img src="../static/img/about-img-1-element.png" alt="">
            </div>
        </div>
        <div class="empty-space h100-xs h175-md"></div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <article class="top-title">
                    <span>ABOUT US</span>
                    <h1 class="h1">We love our wokr</h1>
                    <div class="empty-space h15-xs"></div>
                    <p class="normal-l grey-dark">Maecenas blandit ultricies nisl sit amet aliquam. Donec rutrum rutrum
                        pretium. Integer dolor quam, pulvinar ut libero et, pretium elementum nulla odio eget justo
                        sodales</p>
                </article>
            </div>
        </div>
        <div class="empty-space h30-xs"></div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2 text-center section">
                <p>Praesent euismod sollicitudin tristique. Donec imperdiet convallis ante, id porttitor leo consequat
                    non. Suspendisse rutrum sed nisl in luctus. Pro in accumsan eget lorem id varius. Vestibulum vel
                    sapien tellus. Maecenas blandit ultricies nisl sit amet aliquam. Nam venenatis vel purus eleifend,
                    nec blandit nunc mattis. Nulla facilisi. Aliquam lectus dictum euismod eget euligula. Donec rutrum
                    rutrum pretium. Integer dolor quam, pulvinar ut libero et, pretium elementum nulla. Praesent non
                    odio eget justo sodales pulvinar sodales vitae mi. Etiam consectetur, nisl nec rhoncus consequat,
                    dolor enim ultricies turpis, feugiat imperdiet turpis mauris quis massa.</p>
                <div class="empty-space h10-xs"></div>
                <p>Vestibulum vel sapien tellus. Maecenas blandit ultricies nisl sit amet aliquam. Donec rutrum rutrum
                    pretium. Integer dolor quam, pulvinar ut libero et, pretium elementum nulla. Praesent non odio eget
                    justo sodales pulvinar sodales vitae mi. Etiam consectetur, nisl nec rhoncus consequat, dolor enim
                    ultricies turpis, feugiat imperdiet turpis mauris quis massa.</p>
            </div>
        </div>
        <div class="empty-space h70-xs h140-md"></div>
        <div class="benefits">
            <div class="cell-view">
                <img src="../static/img/about-img-2.jpg" alt="">
            </div>
            <div class="empty-space h35-xs h0-md"></div>
            <div class="cell-view">
                <article>
                    <h4 class="h4 text-left">Our benefits</h4>
                    <div class="empty-space h15-xs"></div>
                    <p><span>1</span>Praesent euismod sollicidin tristique. Donec imperdiet convallis ante, id porttitor
                        leo consioequat non. Duis scelerisque turpis id neque lobortis, ut egestas nisi molestie</p>
                    <div class="empty-space h20-xs"></div>
                    <p><span>2</span>Praesent euismod sollicidin tristique. Donec imperdiet convallis ante, id porttitor
                        leo consioequat non. Duis scelerisque turpis id neque lobortis, ut egestas nisi molestie</p>
                    <div class="empty-space h20-xs"></div>
                    <p><span>3</span>Praesent euismod sollicidin tristique. Donec imperdiet convallis ante, id porttitor
                        leo consioequat non. Duis scelerisque turpis id neque lobortis, ut egestas nisi molestie</p>
                    <div class="empty-space h20-xs"></div>
                    <p><span>4</span>Praesent euismod sollicidin tristique. Donec imperdiet convallis ante, id porttitor
                        leo consioequat non. Duis scelerisque turpis id neque lobortis, ut egestas nisi molestie</p>
                </article>
            </div>
        </div>
        <div class="empty-space h70-xs h140-md fl"></div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <article class="top-title">
                    <span>OUR SERVICES</span>
                    <h1 class="h1">What we do the best</h1>
                    <div class="empty-space h15-xs"></div>
                    <p class="normal-l grey-dark">Donec rutrum rutrum pretium. Integer dolor quam. Curabitur nec nisi
                        vel lacus condimentum tincidunt a nec libero. Nam massa lectus, consequat at metus</p>
                </article>
            </div>
        </div>
        <div class="empty-space h40-xs h90-md"></div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="row">
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="service">
                            <a href="#">
                                <img src="../static/img/service-img-1.png" alt="">
                                <span>GRAPHIC DESIGN</span>
                            </a>
                            <p>Praesent euismod sollicitudin tristique. Donec imperdiet convallis ante, id porttitor leo
                                consequat non. Suspendisse rutrum sed nisl</p>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="service">
                            <a href="#">
                                <img src="../static/img/service-img-2.png" alt="">
                                <span>BRENDING</span>
                            </a>
                            <p>Vestibulum vel sapien tellus. Maecenas blandit ultricies nisl sit amet aliquam. Donec
                                rutrum rutrum pretium. Integer dolor sed nisl quam</p>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="service">
                            <a href="#">
                                <img src="../static/img/service-img-3.png" alt="">
                                <span>DEVELOPMENT</span>
                            </a>
                            <p>Integer dolor quam, pulvinar ut libero et, pretium elementum nulla. Praesent non odio
                                eget justo sodales pulvinar sodales vitae sed por</p>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="service">
                            <a href="#">
                                <img src="../static/img/service-img-4.png" alt="">
                                <span>ANIMATION</span>
                            </a>
                            <p>Fusce efficitur lacus viverra tellus consequat, non faucibus sapien cursus. Integer dolor
                                quam. Mauris tincidunt nibh sit amet egestas laoree</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="empty-space h35-xs h100-md"></div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <article class="top-title">
                    <span>OUR TEAM</span>
                    <h1 class="h1">We are ctreative</h1>
                    <div class="empty-space h15-xs"></div>
                    <p class="normal-l grey-dark">Curabitur nec nisi vel lacus condimentum tincidunt a nec libero. Nam
                        massa lectus, consequat at metus id, vestibulum aliquam quam</p>
                </article>
            </div>
        </div>
        <div class="empty-space h40-xs h80-md"></div>
        <div class="swiper-with-pagination style2">
            <div class="swiper-container" data-speed="1000" data-breakpoints="1" data-space="30"
                 data-slides-per-view="4" data-xs-slides="1" data-sm-slides="2" data-md-slides="3" data-lg-slides="3">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/img/about-img-3.jpg" alt=""></a>
                        <div class="team-description">
                            GARY
                            <br>MITCHEL
                            <div class="empty-space h10-xs"></div>
                            <span>Designer</span>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/img/about-img-4.jpg" alt=""></a>
                        <div class="team-description">
                            NATAN
                            <br>MERKURY
                            <div class="empty-space h10-xs"></div>
                            <span>Project Maneger</span>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/img/about-img-5.jpg" alt=""></a>
                        <div class="team-description">
                            ERIKA
                            <br>DUNKIN
                            <div class="empty-space h10-xs"></div>
                            <span>Designer</span>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/img/about-img-6.jpg" alt=""></a>
                        <div class="team-description">
                            JONATAN
                            <br>DUNKIN
                            <div class="empty-space h10-xs"></div>
                            <span>Web-Developer</span>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/img/about-img-3.jpg" alt=""></a>
                        <div class="team-description">
                            GARY
                            <br>MITCHEL
                            <div class="empty-space h10-xs"></div>
                            <span>Designer</span>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/img/about-img-4.jpg" alt=""></a>
                        <div class="team-description">
                            NATAN
                            <br>MERKURY
                            <div class="empty-space h10-xs"></div>
                            <span>Project Maneger</span>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/img/about-img-5.jpg" alt=""></a>
                        <div class="team-description">
                            ERIKA
                            <br>DUNKIN
                            <div class="empty-space h10-xs"></div>
                            <span>Designer</span>
                        </div>
                    </div>
                </div>
                <div class="empty-space h35-xs"></div>
                <div class="swiper-pagination-wrapper">
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        <div class="empty-space h70-xs h140-md fl"></div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="quote-wrapper">
                    <div class="quote section cell-view">
                        <img src="../static/img/quote-left.png" alt="">
                        <div class="empty-space h5-xs"></div>
                        <p class="biggest-1">I'm selfish, impatient and a little insecure. I make mistakes, I am out of
                            control and at times hard to handle. But if you can't handle me at my worst, then you sure
                            as hell don't deserve me at my best</p>
                        <div class="empty-space h15-xs"></div>
                        <img src="../static/img/quote-right.png" alt="">
                        <div class="empty-space h10-xs"></div>
                        <p class="big-2">MELANI MONREO</p>
                        <div class="empty-space h5-xs"></div>
                        <p class="grey">designer, REDstone Company</p>
                    </div>
                    <div class="cell-view"><img src="../static/img/about-img-7.jpg" alt=""></div>

                </div>
            </div>
        </div>
        <div class="empty-space h70-xs h140-md"></div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <article class="top-title">
                    <span>OUR PHOTO</span>
                    <h1 class="h1">Passion in our work</h1>
                    <div class="empty-space h15-xs"></div>
                    <p class="normal-l grey-dark">Cras faucibus posuere elementum. Cras a est et diam vehicula tempus
                        dictum eu nunc. Praesent non nibh in mauris maximus pretium nec sed sapien</p>
                </article>
            </div>
        </div>
        <div class="empty-space h40-xs h80-md"></div>
        <div class="swiper-with-pagination style3">
            <div class="swiper-container" data-speed="1000" data-breakpoints="1" data-slides-per-view="4"
                 data-xs-slides="2" data-sm-slides="3" data-md-slides="4" data-lg-slides="4">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/img/about-img-8.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/img/about-img-9.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/img/about-img-10.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/img/about-img-11.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/img/about-img-8.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/img/about-img-9.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/img/about-img-10.jpg" alt=""></a>
                    </div>
                </div>
                <div class="empty-space h35-xs"></div>
                <div class="swiper-pagination-wrapper">
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>

    </div>
    <!-- end container-fluid-style2 -->
    <div class="empty-space h45-xs h90-md fl"></div>

    <!-- footer -->
    <footer class="footer-style">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12">
                    <div class="copyright normal-s">
                        Copyright &copy; 2017.Company name All rights reserved.More Templates <a
                            href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a
                            href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- footer -->

</div>
<!-- content -->

<script src="../static/js/jquery-2.2.4.min.js"></script>
<script src="../static/js/swiper.jquery.min.js"></script>
<script src="../static/js/global.js"></script>
</body>
</html>
